<template>
  <div class="leftCenterLine">
    <dv-loading style="color: aqua" v-if="loading">加载中</dv-loading>
    <div ref="app" class="echarts" v-else></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
// import * as requests from "./api/index";
export default {
  props: {
    dataX: {
      type: Array,
      default: [],
    },
    dataY: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  watch: {
    dataY: {
      handler(newValue, oldValue) {
        this.getdata();
      },
      deep: true,
    },
  },

  methods: {
    getdata() {
      var myChart = echarts.init(this.$refs.app);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "-1%",
          right: "0%",
          bottom: "2%",
          // top: "7%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.dataX,
          // data: [
          //   "08:00-10:00",
          //   "10:00-12:00",
          //   "12:00-14:00",
          //   "14:00-16:00",
          //   "16:00-18:00",
          //   "18:00-20:00",
          //   "20:00-22:00",
          //   "22:00-00:00",
          //   "00:00-02:00",
          //   "02:00-04:00",
          //   "04:00-06:00",
          //   "06:00-08:00",
          // ],
          axisLabel: {
            textStyle: {
              color: "#a6cac9", // X轴字体颜色
              fontSize: 14, // X轴字体大小
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数量",
            data: this.dataY,
            type: "line",
            lineStyle: {
              width: 4, // 设置线条宽度为3
              color: "#38C986",
            },
            label: {
              show: true,
              position: "top",
              color: "#8E99E4",
              fontSize: 18,
            },
          },
        ],
      };
      option && myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
  mounted() {
    this.getdata();
    this.$nextTick(() => {
      this.getdata();
    });
  },
};
</script>
<style scoped>
.echarts {
  width: auto;
  height: 50vh;
}
/* @media screen and (min-width: 1920px) {
  .echarts {
    height: 38rem;
  }
}
@media screen and (min-width: 3840px) {
  .echarts {
    height: 42rem;
    width: auto;
  }
} */
</style>
